<template>
  <div>
    <nuxt-link :to="{name:'revise'}" tag="div" class="m_header">
      <table border="0">
        <tr>
          <td width="30%">
            <span class="m_h_left">
              <i class="iconfont icon-yonghu"></i>
            </span>
          </td>
          <td width="70%">
            <p>用户名</p>
            <p><i class="iconfont icon-shouji"></i>166****0004</p>
          </td>
        </tr>
      </table>
    </nuxt-link>
    <div class="m_content">
      <nuxt-link :to="{name:'account'}" tag="p"><i class="iconfont icon-shouyi"></i>我的账户<i class="iconfont icon-you"></i></nuxt-link>
      <nuxt-link :to="{name:'mine'}" tag="p"><i class="iconfont icon-dingdanyichenggong"></i>历史订单<i class="iconfont icon-you"></i></nuxt-link>
      <nuxt-link :to="{name:'mine'}" tag="p"><i class="iconfont icon-shouhuodizhi"></i>下级代理<i class="iconfont icon-you"></i></nuxt-link>
    </div>
  </div>
</template>

<script>
export default {

};
</script>
<style lang="stylus" scoped>
.m_content
  box-shadow 1px 1px 1px 1px #ccc
  p
    line-height 0.9rem
    height 0.9rem
    border-bottom 1px solid #f1f1f1
    a
      color black
    i
      &:first-child
        padding 0 0.1rem
        font-size 0.4rem
      &:last-child
        float right
        padding-right 0.2rem
        font-size 0.3rem
.m_header
  height 2rem
  background #26a2ff
  margin-bottom 0.4rem
  box-shadow: 2px 1px 8px 1px #b9bca9;
  table
    width 100%
    height 100%
    td
      &:nth-child(2)
        p
          color #fff
          line-height 1
          &:nth-child(1)
            font-weight bold
            margin-bottom 0.2rem

    .m_h_left
      margin-left: 0.2rem;
      display: inline-block;
      width: 1.1rem;
      height: 1.1rem;
      background: #fff;
      border-radius: 50%;
      text-align: center;
      line-height: 1.1rem;
      i
        font-size 0.6rem
        color #ccc
    .m_h_right
      i
        font-size 0.5rem
        color #ffffff
        font-weight bold
</style>

